<template>
<Header />
  <div class="container-fluid">
    <div class="row paddingTOP"> </div>
    <div class="row g-0">
      <div class="col-auto">
        <img :src="novel.novel_pic" alt="" class="novel-pic" />
      </div>
      <div class="col rightInfo">
        <div class="row writer bookname">{{ novel.novel_name}}</div>
        <div class="row writer">作者: {{ novel.novel_author ? novel.novel_author.nickname : '未知' }}</div>
        <div class="row writer">分类: {{ novel.novel_type }}</div>
        <div class="row writer">状态: {{ novel.novel_state ? '完结' : '连载' }}</div>
        <div class="row"><button class="strbtn" @click="goToRead(novel.latest_chapter.id)">开始阅读</button></div>
      </div>
    </div>
    <div class="row">
      <div class="col noveldesc">
        简介：{{ novel.novel_desc }}
      </div>
    </div>
  <ChapterList />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import {useRoute, useRouter} from 'vue-router';
import Header from "@/components/Header.vue";
import ChapterList from "@/views/index/ChapterList.vue";
import axios from 'axios';
import router from "@/router/index.js";
import config from "../../../config/config.js";

const route = useRoute(); // 获取当前路由
const novelId = route.params.novelId; // 获取小说 ID
const novel = ref({}); // 存储小说信息
// 跳转到指定小说的函数
const goToRead = (first_chapter_id) => {
  if(first_chapter_id){
    router.push(`/chapter/${first_chapter_id}`); // 路由跳转
  }
};
// 获取小说详情
const fetchNovelInfo = async () => {
  try {
    const response = await axios.get(`${config.apiUrl}/novel/info?novelId=${novelId}`);
    novel.value = response.data; // 存储小说信息
  } catch (error) {
    console.error("Error fetching novel info:", error); // 处理错误
  }
};

onMounted(fetchNovelInfo); // 组件挂载时获取小说详情
</script>

<style scoped>
.paddingTOP{
  margin-top: 12px;
}
.novel-pic{
  width: 135px;
  height: 178px;
  padding: 5px; /* 图片的内边距 */
}
.bookname{
  letter-spacing: 1px;
  font-size: 20px;
  font-weight: bold;
}
.rightInfo{
  padding-left: 25px;
}
.writer {
  padding-bottom: 10px;
}
.strbtn{
  width: 100px;
  border: 1px solid #666;
  background-color: white;
}
.noveldesc{
  padding: 15px;
  letter-spacing: 1px;
}
</style>
